<template>
  <div class="search-container">
    <!-- 搜索栏 -->
    <!-- Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮。 -->
    <form action="/">
      <van-search
        v-model="searchText"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch(searchText)"
        @cancel="$router.back()"
        @focus="isResultShow = false"
      />
    </form>
    <!-- /搜索栏 -->

    <!-- 搜索结果 -->
    <search-result
      v-if="isResultShow"
      :search-text="searchText"
    ></search-result>
    <!-- /搜索结果 -->

    <!-- 联想建议 -->
    <search-suggestion
      v-else-if="searchText"
      :search-text="searchText"
      @search="onSearch"
    ></search-suggestion>
    <!-- /联想建议 -->

    <!-- 历史记录 -->
    <search-history
      v-else
      :search-histories="searchHistories"
      @search="onSearch"
      @update-histories="searchHistories = $event"
    ></search-history>
    <!-- /历史记录 -->
  </div>
</template>

<script>
import SearchSuggestion from "./components/search-suggestion.vue";
import SearchHistory from "./components/search-history.vue";
import SearchResult from "./components/search-result.vue";
import { mapState } from "vuex";
import { setItem, getItem } from "@/utils/storage";
/* import {
    getSearchHistories
  } from '@/api/search'; */
export default {
  // 组件名称
  name: "SearchIndex",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {
    SearchSuggestion,
    SearchHistory,
    SearchResult,
  },
  // 组件状态值
  data() {
    return {
      searchText: "", //搜索输入框的内容
      isResultShow: false, //控制搜索结果的显示状态
      searchHistories: [], //搜索历史数据
    };
  },
  // 计算属性
  computed: {
    ...mapState(["user"]),
  },
  // 侦听器
  watch: {
    //监视搜索历史记录的变化，存储到本地
    searchHistories() {
      setItem("search-histories", this.searchHistories);
    },
  },
  created() {
    this.loadSearchHistories();
  },
  mounted() {},
  // 组件方法
  methods: {
    onSearch(searchText) {
      //把输入框设置为你要搜索的文本
      this.searchText = searchText;

      const index = this.searchHistories.indexOf(searchText);
      if (index !== -1) {
        //把重复项删除
        this.searchHistories.splice(index, 1);
      }

      //把最新的搜素记录放到顶部
      this.searchHistories.unshift(searchText);

      //如果用户已登录，则把搜索历史记录存储到线上

      //  提示：只要我们调用获取搜索结果的数据接口，后端会给我们自动存储用户的搜索历史记录

      //如果没有登录，则把搜索历史记录存储到本地
      /* setItem('search-histories', this.searchHistories) */

      //展示搜索结果
      this.isResultShow = true;
    },
    async loadSearchHistories() {
      //因为后端存储的用户搜索历史记录太少，所以合并后端存储和本地历史记录
      const searchHistories = getItem("search-histories") || [];
      /* let searchHistories = getItem('search-histories') || []
        if (this.user) {
          const {
            data
          } = await getSearchHistories()

          // 合并数组：[...数组,...数组] 
          // 把Set转化为数组：[...Set对象]
          // 数组去重：[...new Set([...数组,...数组])]

          searchHistories = [...new Set([...searchHistories, ...data.data.keywords])]
        } */
      this.searchHistories = searchHistories;
    },
  },
};
</script>

<style scoped lang='less'>
</style>